<template>
  <div>
    <vue-office-docx
      style="height: 800px"
      :src="src"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <span class="loading-text" v-if="loding">正在加载中...请等待</span>
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
console.log(VueOfficeDocx);
//引入相关样式
import '@vue-office/docx/lib/index.css';
export default {
  name: 'VueOfficeDocxDemo',
  components: {
    VueOfficeDocx,
  },
  props: {
    src: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      loding: true,
      docx: '',
      //   docx: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
    };
  },
  methods: {
    renderedHandler() {
      console.log('渲染完成');
      this.loding = false;
    },
    errorHandler() {
      console.log('渲染失败');
    },
  },
};
</script>

<style scoped>
.loading-text {
  display: block;
  line-height: 200px;
  text-align: center;
  background: #808080;
  color: #fff;
  font-size: 18px;
}
</style>
